<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__receipt">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-input v-model="dataForm.receiptkey" size="small" placeholder="入库单号" clearable>
								</el-input>
							</el-form-item>

							<el-form-item>
								<el-select v-model="dataForm.type" size="small" placeholder="单据类型">
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in receiptType" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="dataForm.status " size="small" placeholder="状态">
									<el-option v-for="item in receiptStatus" :key="item.list" :label="item.listname"
										:value="reString(item.list)">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.sourcekey" size="small" placeholder="来源单号" clearable>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.companyid" size="small" placeholder="供应商号" clearable>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.companyname" size="small" placeholder="供应商名称" clearable>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-date-picker v-model="dataForm.addtime" type="daterange" size="small"
									range-separator="至" start-placeholder="创建日期-开始" end-placeholder="创建日期-结束">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button size="small" @click="getDataList()">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="addOrUpdateHandle()"
									v-if="hasPermission('lswms:receipt:save')">新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="createPutawayHandle()" disabled="idisabled"
									v-if="hasPermission('lswms:receipt:createPutaway')">生成上架任务</el-button>
								<!-- <el-button type="danger"  size="medium" @click="deleteHandle()">删除</el-button> -->
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="CloseReceiptHandle()"
									v-if="hasPermission('lswms:receipt:closeReceipt')">关闭入库单</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="cancelReaceiptHandle()"
									v-if="hasPermission('lswms:receipt:cancelReaceipt')">撤销入库</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="redoReaceiptHandle()"
									v-if="hasPermission('lswms:receipt:redoReaceipt')">重新激活</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="danger" size="small" @click="deleteHandle()"
									v-if="hasPermission('lswms:receipt:delete')">删除</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="showQc()">扫描新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="printQc()">打印随箱卡</el-button>
							</el-form-item>
							<!--<el-form-item>-->
								<!--<el-button type="primary" size="small" @click="loginns()">login测试</el-button>-->
							<!--</el-form-item>-->
						</el-form>

						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;">

							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<!-- <el-table-column prop="id" label="序号"  header-align="center"
                                             align="center"></el-table-column> -->
							<el-table-column prop="receiptkey" label="入库单号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="typestr" label="单据类型" header-align="center" align="center">
							</el-table-column>
							<!-- <template #default="scope">
									<el-select size="mini" v-model="scope.row.type" placeholder="请选择" disabled>
										<el-option v-for="item in receiptType" :key="item.list" :label="item.listname"
												   :value="item.list">
										</el-option>
									</el-select>
								</template> -->


							<el-table-column prop="statusstr" label="状态" header-align="center" align="center">
							</el-table-column>
							<!-- <template #default="scope">
									<el-select size="mini" v-model="scope.row.status " placeholder="请选择" disabled>
										<el-option v-for="item in receiptStatus" :key="item.list" :label="item.listname"
											:value="reString(item.list)">
										</el-option>
									</el-select>
								</template> -->

							<el-table-column prop="companyid" label="供应商号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="companyname" label="供应商名称" header-align="center" align="center">
							</el-table-column>

							<el-table-column prop="remark" label="备注" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="adduser" label="创建人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="addtime" label="创建时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatuser" label="更新人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column type="expand" fixed="right" label="详情">
								<template #default="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-row>
											<el-col :span="4">
												<el-form-item label="供应商名称:">
													<span>{{ props.row.companyname }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="供应商号:">
													<span>{{ props.row.companyid }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="联系人:">
													<span>{{ props.row.contacts }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="电话:" style="">
													<span>{{ props.row.phone }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="地址:">
													<span>{{ props.row.address }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="来源单时间:">
													<span>{{ props.row.sourcedate }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="来源单类型:">
													<span>{{ props.row.sourcetype}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="来源单号:">
													<span>{{ props.row.sourcekey}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="关联单据:">
													<span>{{ props.row.relatedorderkey}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="备注:">
													<span>{{ props.row.remark}}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="回传状态:">
													<span>{{ props.row.backstatus}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传时间:">
													<span>{{ props.row.backdate}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传结果:">
													<span>{{ props.row.backresult}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="回传码:">
													<span>{{ props.row.backcode}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
											</el-col>
											<el-col :span="4">
											</el-col>
										</el-row>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
								<template #default="scope">
									<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"
										v-if="hasPermission('lswms:receipt:update')">修改
									</el-button>
									<el-button type="text" size="small" @click="deleteHandle(scope.row.id)"
										v-if="hasPermission('lswms:receipt:delete')">删除
									</el-button>
									<el-button type="text" size="small"
										@click="listHandle(scope.row.id,scope.row.receiptkey)">明细</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<receiptAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate"
							@refresh-data-list="getDataList"></receiptAddOrUpdate>
						<!-- 明细 -->
						<ReceiptTab v-if="receiptdetailVisible" ref="receiptdetailvue"></ReceiptTab>
					</div>
				</el-card>
			</div>
		</div>
		<el-dialog  v-model="outerVisible" title="扫描新增">
			<el-form>
				<el-form-item>
					<el-input v-model="qcdata" placeholder="二维码" type="textarea" :autosize="{ minRows: 8, maxRows: 20}"
						clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" @click="putQcData()">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div v-show="false">
			<div>
				<button v-print="'#printObj'" id="print11">Print local range</button>
			</div>
			<div id="printObj">
				<div v-for=" (item,i) in printQcdata "  style="page-break-after:always" >
					<table border="1" cellspacing="0" style="width:320px;height: 240px;text-align:left">
						<tr>
							<td colspan="2" style="text-align:center" height="24px">{{item.lot6}}</td>
						</tr>
						<tr>
							<td rowspan="8" style="width:150px;padding : 10px">
								<qrcode-vue :value="item.qcdataStr" :size=120 level="H" />
							</td>
							<td height="24px">{{item.lot8}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.qty}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.sku}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.lot11}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.lot12}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.lot13}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.totray}}</td>
						</tr>
						<tr>
							<td  height="24px">{{item.descr}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ReceiptTab from "./ReceiptTab";
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import receiptAddOrUpdate from "@/components/lswms/receipt/ReceiptAddOrUpdate";
	import receiptdetail from "@/views/lswms/receipt/Receiptdetail.vue"
	import {
		createPutaway,
		closeReceipt,
		cancelReaceipt,
		redoReaceipt,
		postQcCreate,
		getPrintQc
	} from "@/network/lswms/receipt/Receipt.js"
	import {
		getCodeListByCode,
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import QrcodeVue from 'qrcode.vue'
	import {
		hasPermission
	} from "@/utils/hasPermission"
	export default {
		name: "receipt",
		data: function () {
			return{
			    idisabled : false
			}
        }
		,
		components: {
			receiptAddOrUpdate,
			receiptdetail,
			ReceiptTab,
			QrcodeVue
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();



			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/receipt/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/receipt';
				mixinViewModuleOptions.value.exportURL = '/lswms/receipt/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}
				receiptTypeFn();
				receiptStatusFn()
			})

			const receiptStatus = ref("");

			const receiptStatusFn = () => {

				getCodeListByCode('receiptstatus').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					receiptStatus.value = res.data;
				}).catch((err) => {});
			}

			//================================================login测试======================================================================================
			const loginns=()=>{
			    try {
                    this.idisabled = true;
                    setTimeout(()=>{
                        this.idisabled = false;
                    })
                }catch (e) {
					alert(e.msg())
                }

			}

			const receiptType = ref("");


			const receiptTypeFn = () => {

				getCodeListByCode('ReceiptType').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					receiptType.value = res.data;
				}).catch((err) => {});
			}


			const receiptdetailVisible = ref(false);
			const receiptdetailvue = ref(null);

			//打开codelist页
			const listHandle = (id, receiptkey) => {
				receiptdetailVisible.value = true;
				nextTick(function() {
					receiptdetailvue.value.dataForm.receiptkey = receiptkey;
					receiptdetailvue.value.init();
				})
			}


			//生成上架任务
			const createPutawayHandle = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				if (dataListSelections.value.length > 1) {
					return ElMessage({
						message: '请选择一条单据',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定进行生成上架任务吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					let para = {
						"receiptkey": dataListSelections.value.map(function(item) {
							return item["receiptkey"]
						})
					}
					createPutaway(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}
			const CloseReceiptHandle = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				if (dataListSelections.value.length > 1) {
					return ElMessage({
						message: '请选择一条单据',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定关闭选择的单据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = {
						"receiptkey": dataListSelections.value.map(function(item) {
							return item["receiptkey"]
						})
					}
					closeReceipt(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}
			const cancelReaceiptHandle = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				if (dataListSelections.value.length > 1) {
					return ElMessage({
						message: '请选择一条单据',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定关闭选择的单据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = {
						"receiptkey": dataListSelections.value.map(function(item) {
							return item["receiptkey"]
						})
					}
					cancelReaceipt(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}
			const redoReaceiptHandle = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				if (dataListSelections.value.length > 1) {
					return ElMessage({
						message: '请选择一条单据',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定关闭选择的单据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = {
						"receiptkey": dataListSelections.value.map(function(item) {
							return item["receiptkey"]
						})
					}
					redoReaceipt(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}

			const qcdata = ref('');
			const outerVisible = ref(false);
			const showQc = () => {
				qcdata.value = '';
				outerVisible.value = true;
			}

			const putQcData = () => {
				if (qcdata.value == '') {
					return ElMessage({
						message: '请录入二维码信息',
						type: 'warning',
						duration: 1000
					});
				}
				postQcCreate({
						'QC': qcdata.value
					})
					.then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
								outerVisible.value = false;
							}
						});
					}).catch()
			}


			const printQcdata = ref([]);
			const qrCodeDiv = ref(null);
			const printQc = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				if (dataListSelections.value.length > 1) {
					return ElMessage({
						message: '请选择一条单据',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定打印选择的单据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = {
						"receiptkeys": dataListSelections.value.map(function(item) {
							return {"receiptkey":item["receiptkey"]}
						})
					}
					getPrintQc(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}

						let printdata = res.data;
						printQcdata.value = [];


						new Promise(function(resolve, reject) {
							for (let i = 0; i < printdata.length; i++) {
								let sku = printdata[i].sku;
								let descr = printdata[i].descr;
								let totray = printdata[i].totray;
								let lot6 = printdata[i].lot6;
								let lot8 = printdata[i].lot8;
								let lot11 = printdata[i].lot11;
								let lot12 = printdata[i].lot12;
								let lot13 = printdata[i].lot13;
								let qty = printdata[i].qty;

								let qcdataStr = lot6 + ";" + lot8 + ";" + sku + ";" + qty +
									";" + lot11 +
									";" + lot12 + ";" + lot13 + ";" + totray + ";" + descr +
									";"
								let tmp = {
									sku,
									descr,
									totray,
									lot6,
									lot8,
									lot11,
									lot12,
									lot13,
									qty,
									qcdataStr
								};
								printQcdata.value.push(tmp);
							}
							resolve();

						}).then(function(data) {
							//console.log(data);
							let print11 = document.getElementById("print11");
							print11.click();
						})






					}).catch(function() {});

				}).catch(function() {})
			}


			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				receiptStatus,
				receiptType,
				listHandle,
				receiptdetailVisible,
				receiptdetailvue,
				createPutawayHandle,
				CloseReceiptHandle,
				cancelReaceiptHandle,
				redoReaceiptHandle,
				qcdata,
				outerVisible,
				showQc,
				putQcData,
				printQc,
				printQcdata,
				qrCodeDiv,
                loginns
			}
		},
		methods: {
			hasPermission,

			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}
	}
</script>


<style lang="scss" scoped>


</style>
